<template>
  <div class="menu-icon-show"
       :style="commonStyle">
    <!-- 没有图标时 -->
    <div v-if="data == ''"
         class="image addIcon default">
      <a-icon type="plus" />
    </div>
    <!-- 有图标时 本地图片-->
    <div v-else
         class="image addIcon showIcon">
      <a-icon :type="data"
              :style="{'font-size':`${imgSize/2}px`}" />
    </div>
  </div>
</template>

<script>
import { storage } from '@zh/common-utils/http'
import PropTypes from '@zh/common-utils/prop-types'

export default {
  name: 'MenuIconShow',
  extends: null,
  mixins: [],
  components: {},
  props: {
    // 修改数据
    iconData: PropTypes.string.def(''),
    // 图片大小
    imgSize: PropTypes.number.def(50)
  },
  data () {
    return {
      storage,
      // 图片信息
      data: ''
    }
  },
  computed: {
    // 根据size计算样式
    commonStyle () {
      return {
        width: `${this.imgSize}px`,
        height: `${this.imgSize}px`,
        'line-height': `${this.imgSize + 5}px`
      }
    }
  },
  watch: {
    iconData: {
      deep: true,
      immediate: true,
      handler (v) {
        this.data = v
      }
    }
  },
  created () { },
  mounted () { },
  methods: {}
}
</script>

<style lang="less" scoped>
.default {
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.image {
  border-radius: 10%;
}

.addIcon {
  text-align: center;
  background-color: #fafafa;
  border: 1px dashed #ccc;
}
.addIcon i {
  color: #c0c4cc;
}

.showIcon {
  border: none;
}
.showIcon i {
  color: #9a9ea7 !important;
}
</style>